<template>
  <scroller class="page">
    <div class="order-list">
    <div class="order-item" v-for="(item, index) in list">
      <div class="order-item-header">
        <text class="order-item-time">{{ item.addTime }}</text>
        <text class="order-item-status" v-if="item.isDone == 1">已完成</text>
        <text class="order-item-status" v-else-if="item.status == 1 && item.isNeedTrack == 1 && item.isDeliverd == 0">待发货</text>
        <text class="order-item-status" v-else-if="item.status == 1 && item.isNeedTrack == 1 && item.isDeliverd == 1">已发货</text>
        <text class="order-item-status" v-else-if="item.status == -3">支付失败</text>
        <text class="order-item-status" v-else-if="item.status == -2">已关闭</text>
        <text class="order-item-status" v-else-if="item.status == -1">已退款</text>
        <text class="order-item-status" v-else-if="item.status == 0">未支付</text>
        <text class="order-item-status" v-else-if="item.status == 1">已支付</text>
      </div>
      <div @click="goInfo(item)" v-if="item.cart && item.cart.length > 0">
        <div class="order-item-content" v-for="product in item.cart">
          <image class="order-item-img" resize="cover" :src="product.cover"></image>
          <div class="order-item-left">
            <text class="order-item-title" v-if="product.formatId">{{ product.title }}（{{ product.format }}）</text>
            <text class="order-item-title" v-else>{{ product.title }}</text>
            <!-- <text class="order-item-subtitle">{{ product.subtitle }}</text> -->
          </div>
          <div class="order-item-right">
            <text class="order-item-price" v-if="product.formatId">￥{{ product.fee | div100 }}</text>
            <text class="order-item-price" v-else>￥{{ product.price }}</text>
            <text class="order-item-count">x{{ product.count }}</text>
          </div>
        </div>
      </div>
      <div class="order-item-content" @click="goInfo(item)" v-else>
        <image class="order-item-img" resize="cover" :src="item.cover"></image>
        <div class="order-item-left">
          <text class="order-item-title" v-if="item.formatId">{{ item.title }}（{{ item.formatTitle }}）</text>
          <text class="order-item-title" v-else>{{ item.title }}</text>
          <text class="order-item-subtitle">{{ item.subtitle }}</text>
        </div>
        <div class="order-item-right">
          <text class="order-item-price" v-if="item.formatId">￥{{ item.formatFee | div100 }}</text>
          <text class="order-item-price" v-else>￥{{ item.price }}</text>
          <text class="order-item-count">x{{ item.count }}</text>
        </div>
      </div>
      <div class="order-list-count">
        <text class="order-list-count-text" v-if="item.cart && item.cart.length > 0">共 {{ item.cart.length }} 件商品  ￥{{ item.total_fee | div100 }}</text>
        <text class="order-list-count-text" v-else>共 1 件商品  ￥{{ item.total_fee | div100 }}</text>
      </div>
      <div class="track-info">
        <text class="track-info-text" @click="goTrackInfo(item)">查看配送</text>
      </div>
    </div>
    </div>
    <div class="top">
      <div class="title" @click="changeIndex(0)">
        <text class="title-text" :class="[ topbarIndex == 0 ? 'title-text-selected' : '' ]">全部</text>
        <div class="underline" v-if="topbarIndex == 0"></div>
      </div>
      <div class="title" @click="changeIndex(1)">
        <text class="title-text" :class="[ topbarIndex == 1 ? 'title-text-selected' : '' ]">待付款</text>
        <div class="underline" v-if="topbarIndex == 1"></div>
      </div>
      <div class="title" @click="changeIndex(2)">
        <text class="title-text" :class="[ topbarIndex == 2 ? 'title-text-selected' : '' ]">服务中</text>
        <div class="underline" v-if="topbarIndex == 2"></div>
      </div>
      <div class="title" @click="changeIndex(3)">
        <text class="title-text" :class="[ topbarIndex == 3 ? 'title-text-selected' : '' ]">已完成</text>
        <div class="underline" v-if="topbarIndex == 3"></div>
      </div>
    </div>
    <Footer />
  </scroller>
</template>
<script>
import Footer from '@/components/Footer';
import utils from './utils/utils.js';
const modal = weex.requireModule('modal');
const event = weex.requireModule('event');
export default {
  name: 'App',
  components: {
    Footer
  },
  data() {
    return {
      topbarIndex: 0,
      list: [],
      sum: 0
    }
  },
  mounted() {
    event.initData(JSON.stringify({'title':'订单列表'}), json => {
      this.init();
    })
  },
  methods: {
    init() {
      var url = '/yq/order/list';
      var params = {};
      var success = res => {
        console.log(res);
        this.list = res.info;
      }
      var fail = res => {
        modal.toast({
          message: '获取数据失败',
          duration: 1
        })
      }
      utils.request(url, params, success, fail);
    },
    goInfo(item) {
      var params = {
        path: 'orderInfo',
        data: JSON.stringify({
          orderId: item.orderId
        })
      }
      event.onPush(JSON.stringify(params));
    },
    changeIndex(index) {
      this.topbarIndex = index;
      var url = '';
      if (this.topbarIndex == 0) {
        url = '/yq/order/list';
      } else if (this.topbarIndex == 1) {
        url = '/yq/order/topay';
      } else if (this.topbarIndex == 2) {
        url = '/yq/order/pending';
      } else if (this.topbarIndex == 3) {
        url = '/yq/order/complete';
      }
      var params = {};
      var success = res => {
        console.log(res);
        this.list = res.info;
      }
      var fail = res => {
        modal.toast({
          message: '获取数据失败',
          duration: 1
        })
      }
      utils.request(url, params, success, fail);
    },
    goTrackInfo(item) {
      event.onPush(JSON.stringify({
        path: 'orderTrackInfo',
        data: JSON.stringify({
          orderId: item.orderId
        })
      }))
    }
  },
  filters: {
    div100(arg1) {
      var t1 = 0, r1;
      try { t1 = arg1.toString().split(".")[1].length; } catch (e) { }
      // with (Math) {
        r1 = Number(arg1.toString().replace(".", ""));
        return (r1 / 100) * Math.pow(10, -t1);
      // }
    }
  }
}
</script>
<style scoped>
text {
  font-size: 32px;
}

.page {
  padding-bottom: 150px;
}

.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 110px;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #aaa;
  background-color: #fff;
}

.title {
  flex-direction: column;
  align-items: center;
}

.title-text {
  margin-bottom: 10px;
  color: #888;
}

.title-text-selected {
  font-weight: bold;
  color: #000;
}

.underline {
  height: 3px;
  width: 100px;
  background-color: #000;
}

.order-list {
  padding-top: 110px;
}

.order-item {
  padding: 30px;
  flex-direction: column;
}

.order-item-header {
  flex-direction: row;
  justify-content: space-between;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #ccc;
  padding-bottom: 10px;
}

.order-item-time {
  font-size: 26px;
  color: #888;
}

.order-item-status {
  font-size: 26px;
  color: #888;
}

.order-item-content {
  flex-direction: row;
  justify-content: space-between;
  padding-top: 30px;
  margin-bottom: 30px;
}

.order-item-img {
  width: 120px;
  height: 120px;
}

.order-item-left {
  width: 420px;
  padding: 0 30px;
}

.order-item-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
}

.order-item-subtitle {
  font-size: 24px;
  color: #888;
}

.order-item-right {
  width: 150px;
  align-items: flex-end;
}

.order-item-price {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
}

.order-item-count {
  font-size: 24px;
  color: #888;
}

.order-list-count {
  padding: 30px 0;
  flex-direction: row;
  justify-content: flex-end;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #ccc;
}

.order-list-count-text {
  font-weight: bold;
}

.track-info {
  flex-direction: row;
  justify-content: flex-end;
}

.track-info-text {
  padding: 5px 20px;
  border-width: 1px;
  border-style: solid;
  border-color: #000;
  border-radius: 1000px;
  font-size: 28px;
}

.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #aaa;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  height: 110px;
}

.bottom-left {
  width: 400px;
  flex-direction: row;
  align-items: center;
}

.bottom-left-check-all {
  flex-direction: row;
  align-items: center;
  width: 150px;
  padding-left: 30px;
}

.bottom-left-check-all-img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.bottom-left-check-all-text {
  font-size: 28px;
  color: #527a5f;
}

.bottom-left-sum {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: 250px;
  padding-right: 20px;
}

.bottom-left-sum-text-1 {

}

.bottom-left-sum-text-2 {
  color: #527a5f;
  font-weight: bold;
}

.bottom-right {
  width: 350px;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #527a5f;
}

.bottom-right-text {
  font-size: 34px;
  color: #fff;
}
</style>